<template>
	<view>
		<u-sticky offsetTop=0 customNavHeight=0>
			<u-status-bar></u-status-bar>
			<!-- 首页头部 -->
			<view class="" style="background: #6492FF;">
				<view class="u-flex u-flex-y-center u-flex-between top">
					<view class="u-flex u-flex-y-center">
						<image src="/static/img/index/logo.png" class="top__logo" mode=""></image>
						<view class="top__text">
							易推帮
						</view>
					</view>
					<view class="u-flex-y-center u-flex">
						<view class="top__search" @click="navto('/pages/home/seaechpage')">
							请输入项目关键字
						</view>
						<image @click="navto('/pages/home/notice')" src="/static/img/home/xiaoxizhongxin.png"
							class="top__zx" mode=""></image>
					</view>
				</view>
				<view class="tabbox">
					<view class="tabbox__item" v-for="(item,index) in tabblist" :key="index"
						@click="navto(item.url+'?title='+item.text+'&type='+item.type)">
						<image :src="'/static/img/home/'+item.icon+'.png'" class="tabbox__item__icon" mode=""
							:style="{width: item.w,height:item.h}"></image>
						<view class="tabbox__item__text">
							{{item.text}}
						</view>
						<image v-if="item.hot" src="/static/img/home/hot.png" class="tabbox__item__hot" mode=""></image>
					</view>
				</view>
			</view>
			<view class="tab" style="background-color: #f6f6f6;">
				<u-tabs :list="list4" @click="clitab" keyName='dictLabel' lineWidth="45.14rpx" lineHeight='10.42rpx'
					:lineColor="'url('+bg+') 100% 100%'" :activeStyle="{
				            color: '#3E3D3D',
				            fontWeight: 'bold',
				            transform: 'scale(1)'
				        }" :inactiveStyle="{
				            color: '#3E3D3D',
				            transform: 'scale(1)'
				        }" :current='curtab' itemStyle="padding-left: 32rpx; padding-right: 26rpx; height: 78rpx;">
				</u-tabs>
			</view>
		</u-sticky>
		<view class="list" v-if="productlist.length>0">
			<proitem v-for="(item,index) in productlist" :key="index" :pro='item'></proitem>
			<!-- <view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
				{{'第' + item + '条数据'}}
			</view> -->
			<u-loadmore @loadmore="loadmore" :status="morestatus" />
		</view>
		<view class="" v-else style="margin-top: 200rpx;">
			<u-empty icon="/static/img/index/empty.png" mode="data" text="暂时没有数据"></u-empty>
		</view>
		<!-- 通知弹框 -->
		<u-popup :show="show" mode="center" round="10rpx" bgColor='transparent'>
			<view class="popbox">
				<view class="popbox__top">
					<image src="/static/img/home/tz.png" class="popbox__top__bg" mode=""></image>
					<view class="popbox__top__text">
						<view class="popbox__top__text__line">
		
						</view>
						<view class="" style="margin: 0 14rpx;">
							{{tz.noticeTitle}}
						</view>
						<view class="popbox__top__text__line">
		
						</view>
					</view>
				</view>
				<!-- 滚动的地方 -->
				<scroll-view scroll-y="true" class="popbox__sc">
					<view class="popbox__content"><u-parse :content="tz.noticeContent"></u-parse>
					</view>
					<!-- <view class="popbox__content" v-html="tz.noticeContent"></view> -->
				</scroll-view>
		
				<!-- 按钮 -->
				<view class="popbox__footer">
					<view class="popbox__btn" @click="clickzx">
						已知晓
					</view>
				</view>
			</view>
		</u-popup>
		<image src="/static/img/home/kf.png" @click="navto('/pages/home/kh')" class="kf" mode=""></image>
	</view>
</template>

<script>
	import {
		list,
		typeList,
		hotList,
		queryLast,
		noticelist
	} from '@/api/home.js'
	export default {
		data() {
			return {
				show: true,
				tabblist: [{
						text: '新手教程',
						icon: 'xsjc',
						w: '46.53rpx',
						h: '47.22rpx',
						url: '/pages/home/generalization',
						type: 5
					},
					{
						text: '平台公告',
						icon: 'ptgg',
						w: '41.67rpx',
						h: '56.94rpx',
						url: '/pages/home/generalization',
						type: 1
					},
					{
						text: '推广技巧',
						icon: 'tgjq',
						w: '41.67rpx',
						h: '59.72rpx',
						url: '/pages/home/generalization',
						type: 4
					},
					{
						text: '游戏赚钱',
						icon: 'yxzq',
						w: '56.25rpx',
						h: '58.33rpx',
						url: '/pages/home/games',
						type: 7,
						hot: 1
					},
				],
				list4: [],
				tz: {},
				productlist: [],
				pageSize: 10,
				pageNum: 1,
				curtab: 0,
				morestatus: 'loadmore',
				dictValue: 0,
				bg: ''
			};
		},
		methods: {
			init() {
				//获取产品类型
				typeList().then(res => {
					if (res.data.code == 200) {
						this.list4 = res.data.data
						this.dictValue = this.list4[0].dictValue
						// 获取热门产品
						this.getlist()
					}
				})
			},
			clickzx(){
				this.show=false
				uni.setStorageSync('ytbhomepopstatus',this.show)
			},
			clitab(item) {
				this.dictValue = item.dictValue
				this.morestatus = 'loadmore'
				this.pageNum = 1
				this.productlist = []
				this.getlist()
			},
			getlist() {
				let status = 0
				if (this.dictValue == 99) {
					status = 1
					list({
						pageSize: this.pageSize,
						pageNum: this.pageNum,
						status
					}).then(res => {
						uni.stopPullDownRefresh()
						if (res.data.code == 200) {
							if (res.data.data.length == 0) {
								this.morestatus = 'nomore';
								return
							} else {
								this.morestatus = 'loadmore';
							}
							this.productlist = [...this.productlist, ...res.data.data]
						}
					})
				} else {
					status = 0
					list({
						type: this.dictValue,
						pageSize: this.pageSize,
						pageNum: this.pageNum,
						status
					}).then(res => {
						uni.stopPullDownRefresh()
						if (res.data.code == 200) {
							if (res.data.data.length == 0) {
								this.morestatus = 'nomore';
								return
							} else {
								this.morestatus = 'loadmore';
							}
							this.productlist = [...this.productlist, ...res.data.data]
						}
					})
				}

			},
			loadmore() {
				if (this.morestatus == 'nomore') return
				this.morestatus = 'loading';
				this.pageNum = ++this.pageNum;
				this.getlist()
			}
		},
		onReachBottom() {
			this.loadmore()
		},
		onShow() {
			// this.init()
		},
		onLoad() {
			// 先判断是否有弹框状态
			if(uni.getStorageSync('ytbhomepopstatus')===true||uni.getStorageSync('ytbhomepopstatus')===false){
				this.show=uni.getStorageSync('ytbhomepopstatus')
			}else{
				// 设置初始弹框状态
				uni.setStorageSync('ytbhomepopstatus',this.show)
			}
			console.log(this.show)
			this.init()
			// 获取最新通知
			noticelist({
				noticeType: 6
			}).then(res => {
				console.log(res)
				if (res.data.code == 200) {
					this.tz = res.data.data[0]
				}
			})
		},
		onPullDownRefresh() {
			this.morestatus = 'loadmore'
			this.pageNum = 1
			this.productlist = []
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.top {
		padding: 10rpx 16rpx 42rpx 32rpx;

		&__logo {
			width: 38.89rpx;
			height: 38.89rpx;
			margin-right: 16rpx;
		}

		&__text {
			font-family: SourceHanSansSC;
			font-weight: bold;
			font-size: 29rpx;
			color: #FFFFFF;
			line-height: 29rpx;
		}

		&__search {
			width: 264rpx;
			height: 50rpx;
			background: rgba(255, 255, 255, .5);
			border-radius: 25rpx;
			line-height: 50rpx;
			padding: 0 28rpx;
			font-family: SourceHanSansSC;
			font-weight: 400;
			font-size: 25rpx;
			color: #FFFFFF;
		}

		&__zx {
			width: 30rpx;
			height: 32rpx;
			margin-left: 20rpx;
		}
	}

	.tabbox {
		padding: 0 16rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__item {
			padding: 22rpx 0 20rpx;
			width: 167rpx;
			height: 96rpx;
			background: #0059C9;
			border-radius: 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: relative;

			&__icon {}

			&__hot {
				width: 40.28rpx;
				height: 41.67rpx;
				position: absolute;
				left: 6rpx;
				top: -2rpx;
			}

			&__text {
				font-family: SourceHanSansSC;
				font-weight: 400;
				font-size: 21rpx;
				color: #FFFFFF;
				line-height: 21rpx;
			}
		}
	}

	.tab {
		padding-bottom: 15rpx;
	}

	.list {
		padding: 0 16rpx 106rpx;


	}

	.popbox {
		width: 642rpx;
		height: 878rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		&__top {
			padding-bottom: 20rpx;
			position: relative;

			&__bg {
				width: 642rpx;
				height: 106rpx;
			}

			&__text {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 642rpx;
				height: 106rpx;
				position: absolute;
				left: 0;
				top: 0;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 33rpx;
				color: #FFFFFF;
				line-height: 33rpx;

				&__line {
					width: 45rpx;
					height: 2rpx;
					background: #FFFFFF;
				}

			}
		}

		&__footer {
			display: flex;
			justify-content: center;
			padding: 20rpx 0;
		}

		&__btn {
			width: 577rpx;
			height: 69rpx;
			background: #6492FF;
			border-radius: 7rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 27rpx;
			color: #FFFFFF;
		}

		&__sc {
			height: calc(878rpx - 106rpx - 20rpx - 40rpx - 69rpx);
			// touch-action: none;
			// height: 100vh;
		}

		&__content {
			padding: 0 40rpx;
		}
	}

	.kf {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 300rpx;
		right: 30rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
</style>